import { Modal } from 'antd';
import { CameraOutlined } from '@ant-design/icons';

interface PermissionModalProps {
  visible: boolean;
  onGrant: () => void;
  onDeny: () => void;
}

export const PermissionModal = ({ visible, onGrant, onDeny }: PermissionModalProps) => {
  return (
    <Modal
      title="摄像头权限"
      open={visible}
      onOk={onGrant}
      onCancel={onDeny}
      okText="允许"
      cancelText="拒绝"
      centered
      className="backdrop-blur-xl"
      okButtonProps={{
        className: "bg-purple-600 hover:bg-purple-700 text-white"
      }}
      cancelButtonProps={{
        className: "text-gray-600 hover:text-gray-700"
      }}
    >
      <div className="text-center py-3">
        <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-purple-100 flex items-center justify-center">
          <CameraOutlined className="text-2xl text-purple-600" />
        </div>
        <p className="text-gray-700 text-sm font-medium">是否允许访问摄像头来体验大头贴功能？</p>
      </div>
    </Modal>
  );
}; 